<template>
	<div class="container" @keyup.enter="login">
		<div class="form">
			<el-form label-width="80px">
				<div class="avatar">
					<p style="font-family: '楷体';font-size: 20px;font-weight: bold;">后台登录</p>
				</div>
				<el-form-item label="">
					<el-input size="large" placeholder="请输入用户名" clearable prefix-icon="el-icon-user"
						v-model="user.username" style="width:280px;"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input size="large" type="password" placeholder="请输入密码" clearable prefix-icon="el-icon-key"
						v-model="user.password" style="width:280px;"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-input size="large" placeholder="请输入验证码" clearable prefix-icon="el-icon-unlock"
						v-model="user.captcha" style="width:160px;"></el-input>
					<img :src="codeUrl" @click="reload" style="cursor: pointer;float:right;margin-right: 40px;" />
				</el-form-item>
				<div class="login">
					<el-button type="success" @click="login" size="medium" :style="{ width: '100%' }" :loading="loading"
						long>
						<span v-if="!loading" style="font-family: '楷体';font-size: 18px;">登录</span>
						<span v-else>登录中...</span>
					</el-button>
				</div>
			</el-form>
			<!-- <el-form label-width="80px">
				<div class="avatar">
					<p style="font-family: '楷体';font-size: 20px;font-weight: bold;">后台登录</p>
				</div>
				<el-form-item label="">
					<el-input size="large" placeholder="请输入手机号" clearable prefix-icon="el-icon-user"
						v-model="user.username" style="width:280px;"></el-input>
				</el-form-item>
				<el-form-item prop="phoneCode" class="pr" style="width:360px;">
					<el-input placeholder="短信验证码" v-model="form.phoneCode"></el-input>
					<button @click.prevent="getCode()" class="code-btn" :disabled="!show">
						<span v-show="show">获取验证码</span>
						<span v-show="!show" class="count">{{ count }} s</span>
					</button>
				</el-form-item>
				
				<el-form-item label="">
					<el-input size="large" placeholder="请输入验证码" clearable prefix-icon="el-icon-unlock"
						v-model="user.captcha" style="width:160px;"></el-input>
					<img :src="codeUrl" @click="reload" style="cursor: pointer;float:right;margin-right: 40px;" />
				</el-form-item>
				<div class="login">
					<el-button type="success" @click="login" size="medium" :style="{ width: '100%' }" :loading="loading"
						long>
						<span v-if="!loading" style="font-family: '楷体';font-size: 18px;">登录</span>
						<span v-else>登录中...</span>
					</el-button>
				</div>
			</el-form> -->

		</div>

	</div>
</template>
<script>
import api from '@/api/api.js';
export default {
	data() {
		return {
			loading: false,		// 加载中 整体
			codeUrl: '/admin/common/captcha?rand=' + new Date().getTime(),
			user: {
				username: '',//用户名
				password: '',//密码
				captcha: '',//验证码
			},
			count: '',
			show: true,
			timer: '',
			form: {
				phoneCode: ''
			}
		}
	},
	methods: {
		// 刷新验证码
		reload() {
			this.codeUrl = '/admin/common/captcha?rand=' + new Date().getTime()
		},
		// 获取短信验证码
		getCode() {
			//axios请求
			console.log(this.form.phone);
			// 验证码倒计时
			if (!this.timer) {
				this.count = 60;
				this.show = false;
				this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= 60) {
						this.count--;
					} else {
						this.show = true;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			}
		},
		// 登录
		login() {
			//验证
			if (!this.user.username) {
				this.$message.error('请输入用户名');
				return false;
			}
			if (!this.user.password) {
				this.$message.error('请输入密码');
				return false;
			}
			if (!this.user.captcha) {
				this.$message.error('请输入验证码');
				return false;
			}
			this.loading = true;
			api.common.login(this.user).then((res) => {
				this.reload(); // 刷新验证码
				this.loading = false;
				if (res.data.code === 200) {
					// 改变登录状态
					localStorage.setItem("login", 1);
					localStorage.removeItem('tags');
					this.$store.commit('login', true);
					this.$message.success(res.data.msg);
					setTimeout(() => {
						this.$router.push('/index')
					}, 1000)
				}
			}).catch(function (res) {
				console.log(res)
			})
		},
		is_login() {
			api.common.is_login().then(res => {
				if (res.data.code === 200) {
					localStorage.setItem("login", 1);
					localStorage.removeItem("tags");
					this.$store.commit('login', true);
					this.$router.push('/index');
					alert(1)
				}
			}).catch(err => {
				console.log(err);
			})
		}
	},
	created() {
		this.is_login();
	}
}
</script>
<style lang="less">
* {
	margin: 0;
	padding: 0;
}

.container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #CCE8CF;
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;

	>.form {
		width: 400px;
		background: #fff;
		opacity: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border: 1px solid #fff;
		border-radius: 15px;
		margin: 200px auto;
		box-shadow: 0 0 28px 3px rgba(63, 112, 179, 0.5);

		.avatar {
			display: flex;
			justify-content: center;
			margin: 20px 0;
		}

		label {
			font-size: 15px;
			color: #eee;
		}

		.code {
			border: 1px solid #fff;
			display: inline-block;
			border-radius: 5px;
			width: 70px;
			height: 100%;
			cursor: pointer;
			color: #333;
			font-size: 16px;
			text-align: center;
		}

		.login {
			width: 90%;
			margin: 20px auto;
		}
	}

}



/* 短信验证码css */
.pr {
	position: relative;
}

.code-btn {
	width: 100px;
	height: 20px;
	position: absolute;
	top: 10px;
	right: 5px;
	z-index: 222;
	color: #ef8466;
	font-size: 14px;
	border: none;
	border-left: 1px solid #bababa;
	padding-left: 10px;
	background-color: #fff;
	cursor: pointer;
}
</style>
